<template>
  <a-row class="salary" type="flex" align="middle" justify="space-between">
    <a-col class="item" :span="10">
      <a-row ref="box" type="flex" align="middle" justify="space-between" @click.native="getItem">
        <a-col :span="7" @click="handleEvent">
          <a-row>
            <strong class="primary">总共</strong>
          </a-row>
          <a-row class="primary">
            <a-statistic :value="options.numAll || 0">
              <template #suffix>人</template>
            </a-statistic>
          </a-row>
        </a-col>
        <a-divider style="height:42px" type="vertical" />
        <a-col :span="7" @click="handleEvent">
          <a-row>
            <strong class="sub_tit">正常</strong>
          </a-row>
          <a-row>
            <a-statistic :value="options.numImportNoError || 0">
              <template #suffix>人</template>
            </a-statistic>
          </a-row>
        </a-col>
        <a-divider style="height:42px" type="vertical" />
        <a-col :span="7" @click="handleEvent">
          <a-row>
            <strong class="sub_tit">异常</strong>
          </a-row>
          <a-row>
            <a-statistic :value="options.numImportError || 0">
              <template #suffix>人</template>
            </a-statistic>
          </a-row>
        </a-col>
      </a-row>
    </a-col>
    <a-col class="item" :span="8">
      <a-row type="flex" align="middle" justify="space-between">
        <a-col :span="10" @click="handleEvent">
          <a-row>
            <strong class="sub_tit">个人缴费合计</strong>
          </a-row>
          <a-row>
            <a-statistic :precision="2" :value="options.personalAllAmount || 0">
              <template #prefix>￥</template>
            </a-statistic>
          </a-row>
        </a-col>
        <a-divider style="height:42px" type="vertical" />
        <a-col :span="10" @click="handleEvent">
          <a-row class="ove">
            <strong class="sub_tit">公司缴费合计</strong>
          </a-row>
          <a-row>
            <a-statistic :precision="2" :value="options.companyAllAmount || 0">
              <template #prefix>￥</template>
            </a-statistic>
          </a-row>
        </a-col>
      </a-row>
    </a-col>
    <a-col class="item" :span="4">
      <a-row>
        <strong class="sub_tit">总合计预缴金额</strong>
      </a-row>
      <a-row>
        <a-statistic :precision="2" :value="options.allAmount || 0">
          <template #prefix>￥</template>
        </a-statistic>
      </a-row>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: "NavItem",
  props: ["options"],

  methods: {
    handleEvent(e) {
      this.$emit("change", e);
    },
    getItem() {}
  }
};
</script>

<style lang="scss" scoped>
.salary {
  cursor: pointer;
  margin: 24px 0;
  .item {
    padding: 24px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  >>> .ant-statistic-content {
    font-size: 18px;
  }
}
</style>
